<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    pieData: {
        type: Array,
        default: () => [],
    },
})
const option = {
    grid: {
        left: '0%',
        right: '0%',
        bottom: '5%',
        top: '10%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'item',
    },
    legend: {
        show: true,
        type:'plain',
		left:'right',
		top:'middle',
        width:130,
        // icon: 'circle',
        // x: 'center',
        // y: '80%',
        // // data: ['一月', '二月', '三月'],
        textStyle: {
            color: '#fff',
        },
        // type: 'scroll',
    },
    series: [
        {
            type: 'pie',
            center: ['50%', '35%'],
            radius: ['60%', '45%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
                normal: {
                    color: function(params) {
                        let colorList = ['#00FFFF','#037AFF','#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
                        return colorList[params.dataIndex]
                    },
                },
            },
            label: {
                show: true,
                position: 'outside',
                formatter: '{d}%',
                color:'#fff'
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1,
                    },
                },
            },
            data: props.pieData,
        },
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
